<template>
  <div class="app-page">
    <!-- 顶部导航栏 -->
    <van-nav-bar title="我的应用" @click-left="onBack"></van-nav-bar>

    <div class="content">
      <!-- 动态提醒用户扫码的文字 -->
      <div class="scan-reminder">
        <p>亲爱的用户，</p>
        <p>
          为了服务继续进行，请
          <span class="highlight">扫描样品条码标签</span>
        </p>
        <p>感谢您的支持与理解！</p>
      </div>
    </div>

    <!-- 页面底部的退出登录按钮 -->
    <div class="footer">
      <van-button
        round
        block
        type="danger"
        class="logout-button"
        @click="logOut"
      >
        退出登录
      </van-button>
    </div>
  </div>
</template>

<script>
  import fc from 'flutter-core'
  import store from '../store'
  import { useRouter } from 'vue-router'
  import { onMounted } from 'vue'

  export default {
    setup() {
      const router = useRouter()

      const onBack = () => history.back()

      const logOut = () => {
        router.push('/login')
        store.commit('setUser', '')
      }

      fc.await('scanner', (res) => {
        if (res) {
          router.push({
            name: 'sampleInfo',
            query: {
              sampleCode: res,
            },
          })
        }
      })

      onMounted(() => {
        console.log(store.state.user)
        if (store.state.user && store.state.user.token) {
          console.log(store.state.user.token)
        } else {
          router.push('/login')
        }
      })

      return {
        onBack,
        logOut,
      }
    },
  }
</script>

<style scoped>
  .app-page {
    display: flex;
    flex-direction: column;
    height: 100vh;
    /* 使用视口高度确保内容填满整个屏幕 */
  }

  .content {
    flex: 1;
    /* 确保内容区域占满除头部和底部外的所有空间 */
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    padding: 20px;
  }

  .scan-reminder p {
    margin: 10px 0;
    line-height: 1.6;
    font-size: 1.2rem;
  }

  .highlight {
    color: #1989fa;
    /* 使用Vant的主题蓝色进行高亮 */
    font-weight: bold;
  }

  .footer {
    padding: 20px;
  }

  .logout-button {
    margin-top: 20px;
    /* 根据实际需要调整 */
  }
</style>
